<template>
  <div>
    <nav-header :msg="msg" @sendToParent="receive" @add="addList"></nav-header>
    <nav-main :list="list" @del="delList"></nav-main>
    <nav-footer :list="list" @clear="clearList"></nav-footer>
    <div @click="clickNum(100)">{{ num }}</div>
    <div @click="clickNum1(20)">{{ num }}</div>
    <!--    {{num}}, {{name}}, {{arr}}, {{obj.age}}-->

    <button @click="add">{{ addNum }}</button>

  </div>
</template>

<script>
// @ is an alias to /src
import { defineComponent, ref, reactive, toRefs, computed, onMounted } from 'vue'
import { useStore } from 'vuex'

import NavHeader from '../components/navHeader/NavHeader'
import NavMain from '../components/navMain/NavMain'
import NavFooter from '../components/navFooter/NavFooter'

export default defineComponent({
  name: 'home',
  props: {},
  components: {
    NavHeader,
    NavMain,
    NavFooter
  },
  // 组件创建过程中执行
  setup () {
    const store = useStore()
    const list = computed(() => {
      return store.state.list
    })

    const msg = ref('父组件给子组件传参')

    const receive = (message) => {
      console.log(message)
    }

    // const num = ref(10)
    // const name = ref('jack')
    const arr = ref(['a', 'b', 'c'])
    // const obj = ref({ age: 20 })
    // return {
    //   num,
    //   name,
    //   arr,
    //   obj
    // }

    // 计算属性基本用法
    const numx = ref(1)
    const numy = ref(2)

    const addNum = computed(() => {
      return numx.value + numy.value
    })

    const add = () => {
      numx.value++
      numy.value++
    }

    const data = reactive({
      name: 'jack',
      num: 10,
      obj: {
        age: 20
      }
    })

    const clickNum = (a) => {
      a++
      console.log('点击了number')
    }

    const clickNum1 = (b) => {
      b++
      console.log('点击了number1')
    }

    const delList = (delIndex) => {
      console.log(delIndex)
      store.commit('delTodo', delIndex)
    }

    const clearList = (arr) => {
      console.log(arr)
      store.commit('clearTodo', arr)
    }

    const addValue = ref('')
    const addList = (addData) => {
      addValue.value = addData
      console.log(addValue)
      // 先判断是否重复
      let repeated = false
      list.value.map(item => {
        if (item.title === addValue.value) {
          repeated = true
        }
      })
      if (!repeated) {
        store.commit('addTodo', {
          title: addValue.value,
          completed: false
        })
      }
    }

    return {
      ...toRefs(data),
      arr,
      clickNum,
      clickNum1,
      addNum,
      add,
      onMounted,
      msg,
      receive,
      addList,
      delList,
      clearList,
      list
    }
  }
})

// export default {
//   name: 'Home',
//   components: {
//     HelloWorld
//   }
// }
</script>

<style scoped>

</style>
